<template>
  <div class="wh-full mx-auto flex-center flex-col lg:flex-row" style="background-color: #fff">
    <svg
      t="1757310698915"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="53871"
      width="500"
      height="500"
    >
      <path
        d="M511.574296 357.956052c-93.289939 0-168.578691 75.653641-168.578691 168.578691 0 93.289939 75.653641 168.578691 168.578691 168.578691 93.289939 0 168.578691-75.653641 168.578691-168.578691 0-93.289939-75.653641-168.578691-168.578691-168.578691z"
        fill="#2D82F0"
        p-id="53872"
      ></path>
      <path
        d="M610.21594 483.721107l-110.19646 110.19646c-5.230075 5.230075-13.014372 6.081482-18.609336 2.189334-1.337926-0.851408-2.189334-1.337926-3.040741-2.189334l-63.369047-63.369046c-6.081482-6.081482-6.081482-15.568595 0-21.650077s15.568595-6.081482 21.650078 0l52.422377 52.422378 98.884904-98.884903c6.081482-6.081482 15.568595-6.081482 21.650077 0 6.689631 5.716593 6.689631 15.203706 0.608148 21.285188z"
        fill="#FFFFFF"
        p-id="53873"
      ></path>
      <path
        d="M214.797957 625.054757l88.911272-88.911272c3.040741-3.040741 7.784297-3.040741 10.581779 0 3.040741 3.040741 3.040741 7.784297 0 10.581779l-88.911272 88.911272c-3.040741 3.040741-7.784297 3.040741-10.581779 0-3.040741-2.675852-3.040741-7.541038 0-10.581779z"
        fill="#FFB800"
        p-id="53874"
      ></path>
      <path
        d="M174.903433 560.712674l52.057489-28.218078-5.838223 45.611117-46.219266-17.393039z"
        fill="#48AAF0"
        p-id="53875"
      ></path>
      <path
        d="M668.598171 327.791899c0 9.243853 7.176149 16.298373 16.298373 16.298373s16.298373-7.176149 16.298372-16.298373c0-9.243853-7.176149-16.298373-16.298372-16.298372-8.757335 0-16.298373 7.176149-16.298373 16.298372z"
        fill="#14CAB4"
        p-id="53876"
      ></path>
      <path
        d="M343.482124 345.914717l37.097042-14.352299-14.352298 37.097043-37.097043 14.352298 14.352299-37.097042z m0 22.744744l-14.960447-36.488894 36.488894 14.960446 14.960447 36.488894-36.488894-14.960446z"
        fill="#FFB800"
        p-id="53877"
      ></path>
      <path
        d="M740.846181 671.760542l39.894525-15.325336-15.325336 39.894524L725.520846 711.655066l15.325335-39.894524z m0 24.447559L724.791068 657.043354l39.164746 16.055114 16.055114 39.164746-39.164747-16.055113z"
        fill="#14CAB4"
        p-id="53878"
      ></path>
      <path
        d="M714.574177 535.535337l90.614088-90.614087c2.675852-2.675852 6.81126-2.432593 9.487112 0 2.432593 2.675852 2.432593 6.81126 0 9.487112L724.18292 545.022449c-2.675852 2.675852-6.81126 2.432593-9.487113 0-2.432593-2.675852-2.432593-6.81126-0.12163-9.487112z"
        fill="#48AAF0"
        p-id="53879"
      ></path>
      <path
        d="M701.681435 587.592826l135.860316-135.860316c2.675852-2.675852 6.81126-2.432593 9.487112 0 2.432593 2.675852 2.432593 6.81126 0 9.487112L711.168547 597.201568c-2.675852 2.675852-6.81126 2.432593-9.487112 0-2.432593-2.797482-2.432593-6.81126 0-9.608742z"
        fill="#FFC94C"
        p-id="53880"
      ></path>
    </svg>
    <div class="w-75">
      <div class="oops mb-5 text-[2rem] font-bold">创建成功！</div>
      <div class="headline mb-2.5 text-xl font-bold text-[#222]">已生成完整的合同。</div>
      <div class="info text-gray mb-7 text-[0.8125rem]">您可以查看详情，继续完成合同的签约。</div>
      <el-button round type="primary" class="btn h-9 w-28 mb-10" @click="toDetail">
        查看详情
      </el-button>
      <el-button round class="btn h-9 w-28 mb-10" @click="back">返回列表</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTagsViewStore } from "@/store";

defineOptions({ name: "ContractEditSuccess" });

// 接收父组件
const props = defineProps<{
  id?: string;
}>();

const router = useRouter();
const tagsViewStore = useTagsViewStore();

// 关闭当前页，跳转详情
const toDetail = async () => {
  await tagsViewStore.closeCurrentView();
  router.push({ path: "/contract/contractDetail", query: { id: props.id } });
};
const back = async () => {
  await tagsViewStore.closeCurrentView();
  router.push("/contract/contract");
};
</script>

<style lang="scss" scoped>
@mixin slide-up-animation($delay: 0s) {
  opacity: 0;
  animation-name: slideUp;
  animation-duration: 0.5s;
  animation-delay: $delay;
  animation-fill-mode: forwards;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.oops {
  color: var(--el-color-primary);
  @include slide-up-animation(0s);
}

.headline {
  @include slide-up-animation(0.1s);
}

.info {
  @include slide-up-animation(0.2s);
}

.btn {
  @include slide-up-animation(0.3s);
}
</style>
